<template>
  <div>
    <!-- 顶部数据展示 -->
    <el-row :gutter="12">
      <el-col :span="8" class="row">
        <router-link to="/centralized/create">
          <el-card class="item">
            <div class="mr10">
              <img
                class="img"
                src="../../../assets/images/business.png"
                alt=""
              />
            </div>
            <div class="ml10">
              <h3>新建工单</h3>
              <h3 style="color: #5d93ff" class="num">{{ NewProcessTotal }}</h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
      <el-col :span="8" class="row">
        <router-link to="/centralized/own">
          <el-card class="item">
            <div class="mr10">
              <img
                class="img"
                src="../../../assets/images/business_self.png"
                alt=""
              />
            </div>
            <div class="ml10">
              <h3>我的流程</h3>
              <h3 style="color: #13227a" class="num">{{ MyProcessTotal }}</h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
      <el-col :span="8" class="row">
        <router-link to="/centralized/todo">
          <el-card class="item">
            <div class="mr10">
              <img
                class="img"
                src="../../../assets/images/backlog.png"
                alt=""
              />
            </div>
            <div class="ml10">
              <h3>待办任务</h3>
              <h3 style="color: #d81e06" class="num">{{ ToDoTaskstotal }}</h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
      <el-col :span="8" class="row">
        <router-link to="/centralized/finished">
          <el-card class="item">
            <div class="mr10">
              <img class="img" src="../../../assets/images/done.png" alt="" />
            </div>
            <div class="ml10">
              <h3>已办任务</h3>
              <h3 style="color: #1afa29" class="num">
                {{ CompletedTaskTotal }}
              </h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
      <el-col :span="8" class="row">
        <router-link to="/centralized/copy">
          <el-card class="item">
            <div class="mr10">
              <img class="img" src="../../../assets/images/bcc.png" alt="" />
            </div>
            <div class="ml10">
              <h3>抄送我的</h3>
              <h3 style="color: #f4ea2a" class="num">{{ CopyMeTotal }}</h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
      <el-col :span="8" class="row">
        <router-link to="/centralized/claim">
          <el-card class="item">
            <div class="mr10">
              <img
                class="img"
                src="../../../assets/images/pending_task.png"
                alt=""
              />
            </div>
            <div class="ml10">
              <h3>知识库</h3>
              <h3 style="color: #8b60f0" class="num">{{ PendingTaskTotal }}</h3>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      class="mt20"
      :data="tableData"
      height="calc(100vh - 380px)"
      style="width: 100%"
      v-loading="loading"
      :cell-style="setCellColor"
      ref="table"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
    >
      <!-- <el-table-column prop="modelName" align="center" label="流程名称">
            </el-table-column>
            <el-table-column prop="version" align="center" label="版本">
            </el-table-column>
            <el-table-column prop="urgency" align="center" label="紧急程度">
                <template slot-scope="scope">
                    <el-tag type="danger">{{ scope.row.urgency == 1 ? "一级" : "" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="category" align="center" label="流程分类">
            </el-table-column>
            <el-table-column prop="description" align="center" label="描述">
            </el-table-column>
            <el-table-column prop="menuName" align="center" label="问题类型">
            </el-table-column>
            <el-table-column prop="createTime" align="center" label="创建时间">
            </el-table-column> -->
      <!-- <el-table-column prop="address" align="center" label="流程发起人">
            </el-table-column>
            <el-table-column prop="zip" align="center" label="接收时间">
            </el-table-column> -->
      <el-table-column
        label="任务编号"
        align="center"
        prop="taskId"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="流程名称" align="center" prop="procDefName" />
      <el-table-column label="任务节点" align="center" prop="taskName" />
      <el-table-column label="流程版本" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="流程发起人" align="center">
        <template slot-scope="scope">
          <label>{{ scope.row.startUserName }}</label>
        </template>
      </el-table-column>
      <el-table-column
        label="接收时间"
        align="center"
        prop="createTime"
        width="180"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleProcess(scope.row)"
            v-hasPermi="['workflow:process:approval']"
            >办理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getWorkFlowOneList_Api,
  getWorkFlowProcessList_Api,
  getCompletedList_Api,
} from "@/api/centralized/serviceCounter";
import { listProcess } from "@/api/workflow/process";
import {
  listOwnProcess,
  listClaimProcess,
  listTodoProcess,
  listFinishedProcess,
  listCopyProcess,
} from "@/api/workflow/process";
import {
  getKnowledgeList_Api, //知识库列表
} from "@/api/centralized/serviceCounter";

export default {
  data() {
    return {
      timer: "",
      loading: true,
      tableData: [],
      NewProcessTotal: "",
      MyProcessTotal: "",
      ToDoTaskstotal: "",
      PendingTaskTotal: "",
      CompletedTaskTotal: "",
      CopyMeTotal: "",
    };
  },
  created() {
    this.getNewProcessTotal();
    this.getMyProcess();
    this.getPendingTask();
    this.getCompletedTask();
    this.getCopyMe();
  },
  mounted() {
    this.getList();
    this.leave();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    enter() {
      clearInterval(this.timer);
    },
    leave() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData.clientHeight + divData.scrollTop + 1 >
          divData.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, 30); // 滚动速度
    },
    // 跳转到处理页面
    handleProcess(row) {
      this.$router.push({
        path: "/workflow/process/detail/" + row.procInsId,
        query: {
          taskId: row.taskId,
          processed: true,
        },
      });
    },
    setCellColor({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        return "color:#d81e06;";
      }
    },
    getNewProcessTotal() {
      listProcess({ pageNum: 1, pageSize: 10 }).then((response) => {
        this.NewProcessTotal = response.total;
      });
    },
    /** 查询流程定义列表 */
    getMyProcess() {
      listOwnProcess({ pageNum: 1, pageSize: 10 }).then((response) => {
        this.MyProcessTotal = response.total;
      });
    },
    getPendingTask() {
      getKnowledgeList_Api({ pageNum: 1, pageSize: 10 }).then((response) => {
        this.PendingTaskTotal = response.total;
      });
    },
    getCompletedTask() {
      listFinishedProcess({ pageNum: 1, pageSize: 10 }).then((response) => {
        this.CompletedTaskTotal = response.total;
      });
    },
    getCopyMe() {
      listCopyProcess({ pageNum: 1, pageSize: 10 }).then((response) => {
        this.CopyMeTotal = response.total;
      });
    },
    async getList() {
      this.loading = true;
      let res = await listTodoProcess({ pageNum: 1, pageSize: 50 });
      let { code, rows, total } = res;
      if (code == 200) {
        this.tableData = rows.slice(0, 10);
        this.ToDoTaskstotal = total;
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  margin: 10px 0;

  .item {
    width: 100%;
    display: flex;
    justify-content: space-around;

    ::v-deep .el-card__body {
      cursor: pointer;
      width: 100%;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .num {
      text-align: center;
      margin-top: 10px;
      font-size: 16px;
    }

    .img {
      width: 64px;
      height: 64px;
    }
  }
}
</style>